<template>
    <div class="main">
      <el-card class="box-card">
        <div style="height: 60px;" class="text item">
           <div style="font-size: 26px;font-weight: bold; position: absolute; left: 40%">{{studentExamInfo.paper_name}}({{studentExamInfo.paper_mark}}分)</div>
           <div style="font-size: 20px; position: relative; top: 70%; left: 34%; ">
             <span style="margin-left: 15px;">学科: <label style="text-decoration:underline">{{studentExamInfo.subject_name}}</label></span>
             <span style="margin-left: 15px;">得分: <label style="text-decoration:underline; font-size: 24px; color: red; font-weight: bold">{{studentExamInfo.student_mark}}</label></span>
             <span style="margin-left: 15px;">姓名: <label style="text-decoration:underline">{{studentExamInfo.student_name}}</label></span>
           </div>
        </div>
      </el-card>


      <el-card class="box-card">

        <div slot="header" class="clearfix">
          <span style="font-weight: bold; font-size: 17px">{{currentQuestion.questionTypeName}} ({{currentQuestion.question_mark}})分</span>
          <el-button
            style="float: right;"
            size="medium"
            @click="commitQuestion"
            type="primary">提交并算分</el-button>
        </div>
        <div  class="text item">
          <div v-html="currentQuestion.content"></div>
          <div>
            <!-- 单选题  -->
            <template v-if="currentQuestion.question_type === 3">
              <el-radio
                v-for="(item, index) in currentQuestion.options"
                :key="index"
                v-model="currentQuestion.user_answer" :label="item.value">{{item.option}}</el-radio>
            </template>

            <!-- 多选题  -->
            <template v-else-if="currentQuestion.question_type === 4">
              <el-checkbox-group
                v-for="(item, index) in currentQuestion.options"
                :key="index"
                v-model="currentQuestion.user_answer">
                <el-checkbox :label="item.value">{{item.option}}</el-checkbox>
              </el-checkbox-group>
            </template>

            <template v-else-if="currentQuestion.question_type === 6">
              <el-radio v-model="currentQuestion.user_answer"  label="1">对</el-radio>
              <el-radio v-model="currentQuestion.user_answer"  label="0">错</el-radio>
            </template>
          </div>
        </div>
        <div  class="text item">
          <h3  style="font-size: 20px;color: black;font-weight: 700;">
            <i class="el-icon-star-off" style="font-size: 20px; color: #239676; float:left;font-weight: 500;"></i>&nbsp;&nbsp;正确答案
          </h3>
          <template v-if="currentQuestion.question_type === 6">
            <div v-if="currentQuestion.answer === '1'" class="answer-detail">对</div>
            <div v-else class="answer-detail">错</div>
          </template>
          <template v-else>
            <div style="margin-left: 30px" v-html="currentQuestion.answer"></div>
          </template>
        </div>

        <div  class="text item" v-if="currentQuestion.question_type === 1
        || currentQuestion.question_type === 2 || currentQuestion.question_type === 5 || currentQuestion.question_type === 7">
          <h3  style="font-size: 20px;color: black;font-weight: 700;">
            <i class="el-icon-edit-outline" style="font-size: 20px; color: #239676; float:left;font-weight: 500;"></i>&nbsp;&nbsp;学员答案
          </h3>
          <div class="answer-detail">
            <ul v-if="currentQuestion.enclosureList && currentQuestion.enclosureList.length > 0" class="el-upload-list el-upload-list--picture-card"
                style="display: inline-block;">
              <li v-for="enclosure in currentQuestion.enclosureList" class="el-upload-list__item is-success">
                <img :src="fileHost + enclosure">
                <a class="el-upload-list__item-name"><i class="el-icon-document"></i></a>
                <label class="el-upload-list__item-status-label">
                  <i class="el-icon-upload-success el-icon-check"></i></label> <i
                class="el-icon-close"></i>
                <i class="el-icon-close-tip">按 delete 键可删除</i>
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="lookAnswerImg(fileHost + enclosure)"><i
                    class="el-icon-zoom-in"></i></span>
                </span>
              </li>
              <el-dialog :visible.sync="dialogAnswerImgVisible">
                <img width="100%" :src="dialogImageUrl">
              </el-dialog>

            </ul>

            <div v-else>
              <el-tag type="danger">学员未作答</el-tag>
            </div>
          </div>
          <div slot="header" class="clearfix">

            <el-form ref="form" label-width="120px">
              <el-form-item label="得分:">
                <el-input v-model="currentQuestion.answer_mark" clearable></el-input>&nbsp;&nbsp;分
              </el-form-item>

              <el-form-item label="评语:">
                <el-input v-model="currentQuestion.comment" clearable :rows="5" type="textarea"></el-input>
              </el-form-item>
            </el-form>
          </div>
        </div>

        <div v-if="currentQuestion.question_type === 1
        || currentQuestion.question_type === 2 || currentQuestion.question_type === 5 || currentQuestion.question_type === 7">
          <el-form label-width="120px">
            <el-form-item label="是否加入错题本:">
              <el-radio v-model="currentQuestion.is_right" :label="0">是</el-radio>
              <el-radio v-model="currentQuestion.is_right" :label="1">否</el-radio>
            </el-form-item>
          </el-form>
        </div>
      </el-card>

      <el-row>
        <el-button-group class="btngroup">
          <el-button
            style="margin-right: 50px"
            icon="el-icon-back"
            @click="goBack"
            size="small">返回上一页</el-button>
          <el-button
            icon="el-icon-arrow-left"
            v-if="currentQuestionPage !==  0"
            @click="lastQuestion"
            size="small">上一题</el-button>
          <el-button
            style="margin-left: 50px"
            v-if="totalCount > 1 && currentQuestionPage !== totalCount - 1"
            @click="nextQuestion"
            type="primary" size="small">下一题<i class="el-icon-arrow-right el-icon--right"></i> </el-button>
        </el-button-group>
      </el-row>
    </div>
</template>

<script>
    let that = null
    export default {
      name: 'studentQuestionHistory',
      data () {
        return {
          dialogImageUrl: '',
          fileHost: this.$http.getFileHost(),
          studentId: '',
          modeId: '',
          studentQuestionList: [],
          currentQuestion: {},
          currentQuestionPage: 0,
          loading: true,
          currentPaperNumber: 0,
          testPaperId: '',
          totalCount: 0,
          paperName: '',
          studentName: '',
          studentExamInfo: {},
          dialogAnswerImgVisible: false,
          studentTestPaperList: []
        }
      },

      beforeCreate () {
        that = this
      },

      mounted () {
        that.studentExamInfo = that.$store.getters['map/getStudentExamInfo']
        that.studentId = that.studentExamInfo.studentId
      //  that.modeId = that.$route.query.modeId
        that.testPaperId = that.studentExamInfo.testPaperId
       // that.paperName = that.$route.query.paperName
      //  that.studentName = that.$route.query.studentName
        that.getStudentQuestionList(null)
        that.getStudentTestPaperList()
      },

      methods: {

        getStudentTestPaperList () {
          let that = this
          that.axios.get(that.$http.httpUrl('/system/studentInfo/getStudentPaperList'), {
            params: {
              testPaperId: that.testPaperId
            }
          }).then(function (response) {
            that.studentTestPaperList = response.data.data
          })
        },

        getStudentQuestionList (loading) {
          that.axios.get(that.$http.httpUrl('/system/studentInfo/getStudentCourseOrPaperQuestionInfoList'), {
            params: {
              studentId: that.studentId,
              testPaperId: that.testPaperId
            }
          }).then(function (response) {
            that.studentQuestionList = response.data.data
            that.studentQuestionList.forEach(item => {
              item.is_right = item.is_right ? 1 : 0
            })
            that.totalCount = that.studentQuestionList.length
            if (that.totalCount > 0) {
              that.currentQuestion = that.studentQuestionList[0]
            }
            that.loading = false
            if (loading) {
              loading.close()
            }
          })
        },

        goBack () {
          this.$confirm('试卷还未批改，确定离开吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.$router.go(-1)
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
        },

        commitQuestion () {
          that.$confirm('确定提交吗?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            that.axios.post(that.$http.httpUrl('/system/studentInfo/correctStudentQuestionAnswer'), {
              studentId: parseInt(that.studentId),
              testPaperId: that.testPaperId ? parseInt(that.testPaperId) : 0,
              studentQuestionList: that.studentQuestionList
            }).then(function (response) {
              if (response.data.code === 1) {
                that.$confirm(response.data.message + '是否继续批改下一张试卷?', '提示', {
                  confirmButtonText: '继续',
                  cancelButtonText: '返回考试记录列表',
                  type: 'warning'
                }).then(() => {
                  that.currentPaperNumber++
                  if (that.studentTestPaperList.length > that.currentPaperNumber) {
                    that.studentId = that.studentTestPaperList[that.currentPaperNumber].student_id
                    const loading = that.$loading({
                      lock: true,
                      text: '正在加载下一张试卷',
                      spinner: 'el-icon-loading',
                      background: 'rgba(0, 0, 0, 0.7)'
                    })
                    that.studentName = that.studentTestPaperList[that.currentPaperNumber].student_name
                    setTimeout(() => {
                      that.getStudentQuestionList(loading)
                    }, 1800)
                  } else {
                    that.$message.error('已经是最后一张试卷了')
                  }
                }).catch(() => {
                  setTimeout(() => {
                    that.$router.push({
                      name: 'studentExam',
                      query: {
                        testPaperId: that.testPaperId
                      }
                    })
                  }, 1500)
                })
              } else {
                that.$message.error(response.data.message)
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消操作'
            })
          })
        },

          // 下一题
        nextQuestion () {
          this.currentQuestionPage++
          this.currentQuestion = this.studentQuestionList[this.currentQuestionPage]
        },

        lookAnswerImg (url) {
          this.dialogAnswerImgVisible = true
          this.dialogImageUrl = url
        },

          // 上一题
        lastQuestion () {
          this.currentQuestionPage--
          this.currentQuestion = this.studentQuestionList[this.currentQuestionPage]
        }
      },

      filters: {

      }
    }
</script>

<style scoped>
  .el-input {
    width: 15%;
    text-align: center;
  }
  .el-row {
         margin-top: 25px;
       text-align: center;
     }

    .main >>> p {
      display: inline-block;
    }
    .text {
      font-size: 14px;
    }

    .item {
      margin-bottom: 18px;
    }
    .clearfix:before, .clearfix:after {
      display: table;
      content: "";
      margin-top: 10px;
    }
    .clearfix:after {
      clear: both
    }

    .answer-detail {
      margin-left: 40px;
    }
    .main .box-card {
      width: 100%;
      margin-top: 10px;
    }
</style>
